<template>
  <div class="product">
    <div class="pic">
      <img :src="pro.smallImg" alt="" />
    </div>
    <div class="name text">{{ pro.name }}</div>
    <div class="price">&yen;100</div>
  </div>
</template>

<script>
export default {
  name: "Product",
  props: {
    pro: Object,
  },
};
</script>
<style lang="less" scoped>
.name {
  margin: 5px 0;
  font-size: 16px;
  text-overflow: ellipsis;
}
.pic img {
  width: 100%;
  display: block;
}

.text {
  overflow: hidden;
  white-space: nowrap;
}
</style>